<template>
  <MyCol v-for="(item, index) in customColList">
    <el-form-item
      :key="item.id"
      :label="item.label"
      :prop="item.attributes == 2 ? 'a' + item.id : ''"
      :rules="fomatRules(item)"
    >
      <el-input
        v-if="item.type == 1"
        :type="item.isTextarea ? 'textarea' : 'text'"
        :placeholder="item.placeholder ? item.placeholder : '请输入'"
        :readonly="
          filterTitle() && item.attributes == 1 && formData['a' + item.id] != ''
        "
        @input="emitUpdate()"
        v-model="formData['a' + item.id]"
      ></el-input>

      <el-input
        v-if="item.type == 2 && !item.decimalPlaces"
        :type="item.isTextarea ? 'textarea' : 'text'"
        :placeholder="item.placeholder ? item.placeholder : '请输入'"
        :readonly="
          filterTitle() && item.attributes == 1 && formData['a' + item.id] != ''
        "
        @input="emitUpdate()"
        v-number
        v-model="formData['a' + item.id]"
      ></el-input>

      <el-input
        v-if="item.type == 2 && item.decimalPlaces"
        :type="item.isTextarea ? 'textarea' : 'text'"
        :placeholder="item.placeholder ? item.placeholder : '请输入'"
        :readonly="
          filterTitle() && item.attributes == 1 && formData['a' + item.id] != ''
        "
        v-model="formData['a' + item.id]"
        v-number="{
          args: 'point',
          dotCount: 2,
          topNoZero: true,
        }"
        @input="emitUpdate()"
      ></el-input>

      <el-date-picker
        v-if="item.type == 3"
        v-model="formData['a' + item.id]"
        :format="filterTimeType(item.timePrecision)"
        :value-format="filterTimeType(item.timePrecision)"
        :type="item.timePrecision == 1 ? 'date' : 'datetime'"
        :readonly="
          filterTitle() && item.attributes == 1 && formData['a' + item.id] != ''
        "
        :placeholder="item.placeholder ? item.placeholder : '选择日期时间'"
        :align="'right'"
        :picker-options="pickerOptions"
        @change="emitUpdate()"
      >
      </el-date-picker>
      <div v-if="item.type == 4">
        <FileUpload
          :detail="false"
          v-model:fileList="formData['a' + item.id]"
          @fileListFun="emitUpdate(item)"
        ></FileUpload>
      </div>
      <el-radio-group v-if="item.type == 6" v-model="formData['a' + item.id]">
        <el-radio
          @change="emitUpdate()"
          v-for="radio in item.radioList"
          :key="radio.id"
          :label="radio.label"
        ></el-radio>
      </el-radio-group>
      <el-checkbox-group
        v-if="item.type == 7"
        v-model="formData['a' + item.id]"
      >
        <el-checkbox
          @change="emitUpdate()"
          v-for="radio in item.radioList"
          :label="radio.label"
          :key="radio.id"
        ></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </MyCol>
</template>

<script setup name="ActiveInput">
import { computed, nextTick, watch, getCurrentInstance } from "vue";
let { proxy } = getCurrentInstance();
const emit = defineEmits(["update:getForm", "getUpdate"]);
const props = defineProps({
  customColList: {
    default: [],
  },
  getForm: {
    default: {},
  },
  title: {
    default: "",
  },
  formRef: { 
    default: {},
  },
  show: {
    default: false,
  },
});
const pickerOptions = ref({
  shortcuts: [
    {
      text: "今天",
      onClick(picker) {
        picker.$emit("pick", new Date());
      },
    },
    {
      text: "昨天",
      onClick(picker) {
        const date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24);
        picker.$emit("pick", date);
      },
    },
    {
      text: "一周前",
      onClick(picker) {
        const date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit("pick", date);
      },
    },
  ],
});
const formData = ref({});
watch(
  () => props.show,
  (n) => {
    if (n) {
      let data = JSON.parse(JSON.stringify(props.getForm));
      props.customColList?.map((item) => {
        data["a" + item.id] = filterValues(item);
      });
      formData.value = data;
      emit("update:getForm", formData.value);
    }
  },
  {
    immediate: true,
    // deep:true
  }
);

function filterTitle() {
  let list = ["修改", "编辑"];
  let bool = list.some((item) => props.title.includes(item));
  return bool;
}
function emitUpdate(item = false) {
  //是否验证字段
  setTimeout(() => {
    emit("update:getForm", formData.value);
    if (item) {
        props?.formRef?.validateField("a" + item.id, () => {});
    }
  }, 0);
}
//过滤时间类型
function filterTimeType(num) {
  switch (num) {
    case "1":
      return "YYYY-MM-DD";
    case "2":
      return "YYYY-MM-DD HH";
    case "3":
      return "YYYY-MM-DD HH:mm";
    case "4":
      return "YYYY-MM-DD HH:mm:ss";
  }
}

function fomatRules(item) {
  let list = [];
  if (item.attributes == 2) {
    list = [
      {
        required: true,
        message: item.prompt ? item.prompt : "请输入" + item.label,
        trigger: filterInputType(item.type),
      },
    ];
  }
  return list;
}

//过滤选择框类型
function filterInputType(type) {
  switch (type) {
    case "1":
      return "blur";
    case "2":
      return "blur";
    case "3":
      return "change";
    case "4":
      return "change";
    case "5":
      return "change";
    case "6":
      return "change";
    case "7":
      return "change";
  }
}

function filterValues(item) {
  let value = "";
  if (item.type == 7 || item.type == 4) {
    value = [];
  } else {
    value = "";
  }

  if (filterTitle()) {
    let obj = props.getForm.fieldValueList?.find(
      (item2) => item.id == item2?.fieldOutput?.id
    );

    if (obj) {
      if (item.type == 7 || item.type == 4) {
        value = JSON.parse(obj.values);
      } else {
        value = obj.values;
      }
    }
  }
  return value;
}
</script>

<style lang="scss" scoped></style>
